<?php include "../config.php";?>
<?php
session_start();

?>
<!--/*验证码的session开始，如果不放在前面，有的服务器会出现警告*/-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/viewport.js"></script>

    <style type="text/css">
*{
	padding:0;
	margin:0;
}
html{ width: 100%; height: 100%;}
body{
/*
    background:url("images/bg_m.jpg") no-repeat;
*/
    background-position:50% 0%;
    padding: 0; margin: 0; position: relative; width: 100%; height: 100%;;
}
#width_height {
	width:100%;
    height:100%;
	position:absolute;
    text-align: center;
}
#width_height::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.gate_content{
    width: 300px;
    display: inline-block;
    vertical-align: middle;
}
#logo{
	width:300px;
	margin: 0px auto 20px;
	text-align:center;
}
#logo img {
	width:100%;
}
#logo h5{
    font-size: 35px;
    margin:40px auto 10px;
    color:#323232;
    font-weight: 700;
}
#logo p{
	font-size:30px;
    margin-top: -11px;
    color:#575757;
}
#content_form{
	width:300px;
	height:280px;
	margin:20px auto;
	color:#999;
}
#content_form ul li {
	list-style:none;
	float:left;
	width:100%;
	height:50px;
    margin: 8px auto;
    border-radius: 5px;
    box-shadow: 4px 2px 13px #ccc;
    background-color: #ffffff;;
}
#content_form ul li .icon_1{
	background:url(images/icon1.png) no-repeat center center;
    background-size: 25px;
}
#content_form ul li .icon_2{
	background:url(images/icon2.png) no-repeat center center;
    background-size: 25px;
}
#content_form ul li .icon_3{
	background:url(images/icon3.png) no-repeat center center;
}
#content_form ul li label{
    height: 50px;
    width: 50px;
    float: left;
	margin-right:5px;
}
#content_form ul li input{
    height: 100%;
    border: none;
    color: #6d6d6d;
    font-size: 20px;
    outline: none;
    width: 245px;
    text-indent: 5px;
}
#submit{
    width: 100%;
    height: 50px;
    background: #424242;
    color: #FFF;
    font-size: 20px;
    font-family: "microsoft yahei";
    cursor: pointer;
    border-radius: 5px;
    margin: 15px 0;
    border: none;
}

#help{
    position: fixed;
    top: 19px;
    right: 20px;
    font-size: 24px;
    color: #424242;
}
#help img{
	width:27px;
	position:relative;
	right:6px;
	top:-3px;
    vertical-align: middle;
}
ul#foger_regist li {
    background: none;
    width: 40%;
    box-shadow: none;
    text-align: center;
    font-size: 2.1em;
    color: #424242;
    height: 50px;
    float: right;
}
</style>
</head>


<body>
<?
if(!isset($_REQUEST['username']) or $_REQUEST['username']=='')
{
	$_REQUEST['username']='';
	$_REQUEST['userpass']='';
}
?>

<div id="width_height">

<div id="help" onclick="help()"><img src="images/help_logo.png"/>帮助</div>

    <script>
        function help(){
            alert('资料收集中！');
        }
    </script>

    <div class="gate_content">
<div id="logo">
<img src="images/logo_m.png" >
<h5>企业资源计划系统</h5>
</div>


<div id="content_form">
<form id="loginform" name="loginform" method="post" action="" enctype="multipart/form-data">
<ul>
  <li><label class="icon_1"></label>
    <input type="text" name="username" alt="账号" id="username"  value="<? echo $_REQUEST['username'] ?>" placeholder="账号"/>
  </li>
  <li><label class="icon_2"></label>
    <input type="password" name="userpass" id="userpass" alt=""  value="<? echo $_REQUEST['userpass'] ?>" placeholder="密码" />
  </li>

    <li>
        <input type="text" name="code" id="code" style="float: left;width: 150px;;" alt="验证码"  />

    <img src="../application/verify/z_imgcode.php" onclick='this.src="../application/verify/z_imgcode.php?"+Math.random();' style="cursor:pointer;height: 50px;width: 150px;">
    </li>
    <?php
    if(isset($_REQUEST['code'])){
//        if($_REQUEST['code'] == strtolower($_SESSION['yzm'])){
        if(1){
            echo "
		<script type='text/javascript'>
		document.getElementById('loginform').action = 'logincheck.php';
        document.getElementById('loginform').submit();
		</script>";
        }else{
            echo '<script type="text/javascript"> alert("请输入正确的验证码！");</script>';
        }
    }
    ?>
        <input type="submit" name="submit" id='submit' value="登　陆" />

</ul>
</form>

	<ul id="foger_regist">
<!--	  <li>忘记密码</li>
	  <li>注册登录</li>-->
        <!--<li onclick="bangdingweixin()">绑定微信</li>-->
	</ul>
<script>
    function bangdingweixin(){
        alert("功能准备开发，敬请期待！")
    }
</script>

</div>
    </div>


</div>




<script language="javascript" type="text/javascript">

    window.onload = function(){


        function textInputFn(name){
            var o =document.getElementById(name);
            o.setAttribute("valueCache",o.value);

            //失去焦点的时候
            o.onblur = function(){
                if(o.value=="") {
                    document.getElementById(name).setAttribute("placeholder","密码");
                    o.valueCache="";
                    o.value=o.alt;

                } else {
                    o.valueCache=o.value;
                }
            };

            //获得焦点的时候
            o.onfocus = function(){
                document.getElementById(name).setAttribute("placeholder","");
                o.value=o.valueCache;
                var e = event.srcElement;
                var r =e.createTextRange();
                r.moveStart('character',e.value.length);
                r.collapse(true);
                r.select();


            };
            o.onblur();
        }



        textInputFn("username");
        textInputFn("userpass");
        textInputFn("code");

    }
</script>





<canvas id="Mycanvas"></canvas>
<script>
	//定义画布宽高和生成点的个数
	var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
    if(WIDTH <= 375){
        POINT = 10;
    }else if(WIDTH <= 800){
        POINT = 15;
    }else if(WIDTH <= 1024){
        POINT = 20;
    }else if(WIDTH <= 1400){
        POINT = 25;
    }else{
        POINT = 35;
    }

	var canvas = document.getElementById('Mycanvas');
	canvas.width = WIDTH,
	canvas.height = HEIGHT;
	var context = canvas.getContext('2d');
	context.strokeStyle = 'rgba(0,0,0,0.02)',
	context.strokeWidth = 1,
	context.fillStyle = 'rgba(0,0,0,0.05)';
	var circleArr = [];

	//线条：开始xy坐标，结束xy坐标，线条透明度
	function Line (x, y, _x, _y, o) {
		this.beginX = x,
		this.beginY = y,
		this.closeX = _x,
		this.closeY = _y,
		this.o = o;
	}
	//点：圆心xy坐标，半径，每帧移动xy的距离
	function Circle (x, y, r, moveX, moveY) {
		this.x = x,
		this.y = y,
		this.r = r,
		this.moveX = moveX,
		this.moveY = moveY;
	}
	//生成max和min之间的随机数
	function num (max, _min) {
		var min = arguments[1] || 0;
		return Math.floor(Math.random()*(max-min+1)+min);
	}
	// 绘制原点
	function drawCricle (cxt, x, y, r, moveX, moveY) {
		var circle = new Circle(x, y, r, moveX, moveY)
		cxt.beginPath()
		cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
		cxt.closePath()
		cxt.fill();
		return circle;
	}
	//绘制线条
	function drawLine (cxt, x, y, _x, _y, o) {
		var line = new Line(x, y, _x, _y, o)
		cxt.beginPath()
		cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'
		cxt.moveTo(line.beginX, line.beginY)
		cxt.lineTo(line.closeX, line.closeY)
		cxt.closePath()
		cxt.stroke();

	}
	//初始化生成原点
	function init () {
		circleArr = [];
		for (var i = 0; i < POINT; i++) {
			circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40));
		}
		draw();
	}

	//每帧绘制
	function draw () {
		context.clearRect(0,0,canvas.width, canvas.height);
		for (var i = 0; i < POINT; i++) {
			drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
		}
		for (var i = 0; i < POINT; i++) {
			for (var j = 0; j < POINT; j++) {
				if (i + j < POINT) {
					var A = Math.abs(circleArr[i+j].x - circleArr[i].x),
						B = Math.abs(circleArr[i+j].y - circleArr[i].y);
					var lineLength = Math.sqrt(A*A + B*B);
					var C = 1/lineLength*7-0.009;
					var lineOpacity = C > 0.03 ? 0.03 : C;
					if (lineOpacity > 0) {
						drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity);
					}
				}
			}
		}
	}

	//调用执行
	window.onload = function () {
		init();
		setInterval(function () {
			for (var i = 0; i < POINT; i++) {
				var cir = circleArr[i];
				cir.x += cir.moveX;
				cir.y += cir.moveY;
				if (cir.x > WIDTH) cir.x = 0;
				else if (cir.x < 0) cir.x = WIDTH;
				if (cir.y > HEIGHT) cir.y = 0;
				else if (cir.y < 0) cir.y = HEIGHT;
				
			}
			draw();
		}, 16);
	}

</script>




</body>
</html>